<template>
	<view class="body">
		<u-form :model="form" ref="uForm">
		<!-- 	<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="server-man" prop="cusName">
				<u-input v-model="form.cusName" placeholder="客户名称(必填)" />
			</u-form-item> -->
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="phone-fill" prop="phoneNumber">
				<u-input :disabled="true" v-model="form.phoneNumber" placeholder="手机号(必填)" />
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="more-circle-fill">
				<u-input v-model="form.code" placeholder="验证码" />
				<!-- <button @click="countTime()" size="mini"  slot="right" :disabled="codebtn.disable" :type="codebtn.type">{{codebtn.tips}}</button> -->
				<u-button @click="countTime()" size="mini" ripple slot="right" :disabled="codebtn.disable" :type="codebtn.type">{{codebtn.tips}}</u-button>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="lock-fill" prop="password">
				<u-input v-model="form.password" type="password" placeholder="密码(必填)" />
			</u-form-item>
			<!-- <u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="weixin-fill">
				<u-input v-model="form.webChatAccount" placeholder="微信号" />
			</u-form-item> -->
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="man-add-fill" prop="surname">
				<u-input v-model="form.surname" placeholder="姓名(必填)" />
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="IE-circle-fill" prop="emailAddress">
				<u-input v-model="form.emailAddress" placeholder="邮箱(必填)" />
			</u-form-item>
		</u-form>
		<view style="margin-top: 20px;">
			<u-button shape="circle" type="success" @click="submit">提交</u-button>
		</view>
		<view @click="goLogin()" class="" style="text-align: center;margin: 20px 0;">
			已有账号去登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codebtn: {
					disable: false,
					tips: '获取验证码',
					type: 'success'
				},
				form: {
					surname: '',
					phoneNumber: '',
					password: '',
					code: '',
					emailAddress: '',
					weChatOpenId: uni.getStorageSync('openid')
				},
				countTimeInfo: {
					receiver: '',
					templateParas: '',
				},
				countTimeNum: 30,
				rules: {
					surname: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'], // 可以单个或者同时写两个触发验证方式
					}],
					emailAddress: [{
						required: true,
						message: '请输入邮件地址',
						trigger: ['blur'],
					}],
					phoneNumber: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur'],
					}],
					password: [{
						min: 6,
						required: true,
						message: '密码不能少于6个字符',
						trigger: 'change'
					}]
				}
			};
		},
		onLoad(obj) {
			this.form.phoneNumber = obj.phone
		},
		methods: {
			countTime() {
				if (this.form.phoneNumber.length != 11) {
					uni.showToast({
						title: '请输入正确手机号'
					})
					return
				}
				this.countTimeInfo.templateParas = Math.random().toString().slice(-6);
				this.countTimeInfo.receiver = this.form.phoneNumber;
				var requestUrl = '/api/services/tms/U8App/SendSmsAsync';
				var inputData = this.countTimeInfo;
				var loadTitle = '正在发送...';
				this.$axios.post(requestUrl, inputData,loadTitle, p => {
					if (p.success) {
						this.codebtn.tips = '倒计时' + this.countTimeNum + 's';
						this.codebtn.type = 'default';
						this.codebtn.disable = true;
						this.timer = setInterval(() => {
							this.countTimeNum--;
							this.codebtn.tips = '倒计时' + this.countTimeNum + 's';
							if (this.countTimeNum == 0) {
								this.codebtn.type = 'success';
								this.codebtn.disable = false;
								this.codebtn.tips = '重新获取验证码'
								clearInterval(this.timer)
							}
						}, 1000)
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.code == '') {
							uni.showToast({
								title: '请输入验证码'
							})
							return
						}
						if (this.form.code != this.countTimeInfo.templateParas) {
							uni.showToast({
								title: '验证码无效'
							})
							return
						}
						var requestUrl = '/api/services/tms/Account/WebChatRegister';
						var inputData = this.form;
						var loadTitle = '正在注册...';
						this.$axios.post(requestUrl, inputData,loadTitle, p => {
							if (p.success) {
								uni.showToast({
									title: '注册成功',
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 2000);
							}
						})
					} else {
						uni.showToast({
							title: '请填写信息'
						})
					}
				});
			},
			goLogin() {
				uni.navigateBack()
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style lang="scss">
	.body {
		padding: 0 40rpx;
	}
</style>
